<template>
  <div :class="clazz">
    <div class="title_logo" @click="toRouter('main')"></div>
    <div class="title_center"></div>
    <div class="title_right">
      <div class="title_weather_time">
        <div class="title_weather_date">{{ currentDate }}</div>
        <div class="title_weather_week">{{ currentDayOfWeek }} {{ currentHalfDay }} {{ currentHm }}</div>
      </div>
      <div class="title_buttons">
        <div class="title_button title_more" @click="clickMoreLayer()"></div>
        <div class="title_button title_expand" @click="toggleFullScreen()"></div>
        <div class="title_button title_close" @click="closeWindow()"></div>
      </div>
    </div>
    <div style="position: absolute;right: 6vh;display: flex;bottom: 0.5vh;color:#00eaff;">{{compname}}</div>
  </div>
  <parking-more-layer :showParkingMoreLayer="showParkingMoreLayer" @closeMoreLayers="closeMoreLayers" @showMoreLayers="showMoreLayers"></parking-more-layer>
  <headquarters-server-more-layer :showHeadquartersServerMoreLayer="showHeadquartersServerMoreLayer" @closeMoreLayers="closeMoreLayers" @showMoreLayers="showMoreLayers"></headquarters-server-more-layer>
  <security-situation-more-layer :showSecuritySituationMoreLayer="showSecuritySituationMoreLayer" @closeMoreLayers="closeMoreLayers" @showMoreLayers="showMoreLayers"></security-situation-more-layer>

  <!-- 用水用电弹出框 -->
  <toilet-ysyd-layer v-if="ysydShowLayer" :ab-items="abItems" @closeChild="closeMoreLayers" ></toilet-ysyd-layer>

</template>
<script setup>
import {computed,ref,onMounted} from "vue";
import router from "../../router/index.js";
import ParkingMoreLayer from "./parking_more/parkingMoreLayer.vue";
import {ajaxRequest} from "../../api/code.js";
import HeadquartersServerMoreLayer from "./headquartersServer_more/headquartersServerMoreLayer.vue";
import SecuritySituationMoreLayer from "./securitySituation/securitySituationMoreLayer.vue";
import ToiletYsydLayer from "./toilet_more/toiletYsydLayer.vue";

const props = defineProps({
  index: Number,
  originName : String,
  title : String,
  abItems: { // 接收 abItems
    type: Array,
    required: true
  }
})

const clazz = ref(props.originName);
if (props.title === '服务区智慧停车系统'){
  clazz.value = 'fwqzhtcxt';
}else if (props.title === '服务区智慧厕所系统'){
  clazz.value = 'fwqzhcsxt';
}else if (props.title === '服务区安全态势感知'){
  clazz.value = 'fwqaqtsgz';
}else if (props.title === 'yz'){
  clazz.value = 'yzbg';
} else if (props.title === 'headquartersServer'){
  clazz.value = 'headquarters-server';
}

const showParkingMoreLayer = ref(false);
const showHeadquartersServerMoreLayer = ref(false);//服务区级看板
const showSecuritySituationMoreLayer = ref(false);
const ysydShowLayer = ref(false);

const clickMoreLayer = ()=>{
  if (props.originName === 'parking'){
    showParkingMoreLayer.value = true;
  }else if(props.originName === 'headquartersServer'){
    showHeadquartersServerMoreLayer.value = true;
  }
  else if(props.originName === 'securitySituation'){
    showSecuritySituationMoreLayer.value = true;
  }else if (props.originName === 'toilet'){
    ysydShowLayer.value = true;
  }
}
const closeMoreLayers = function (args){
  if (args === 'parking'){
    showParkingMoreLayer.value = false;
  }else if (args === 'headquartersServer'){
    showHeadquartersServerMoreLayer.value = false;
  }else if(args === 'securitySituation'){
    showSecuritySituationMoreLayer.value = false;
  }
  ysydShowLayer.value = false;
}
const showMoreLayers = function (args){
  if (args === 'parking'){
    showParkingMoreLayer.value = true;
  }else if (args === 'headquartersServer'){
    showHeadquartersServerMoreLayer.value = true;
  }
  else if(args === 'securitySituation'){
    showSecuritySituationMoreLayer.value = true;
  }
}

const toRouter = (url) => {
  router.push({name: url})
}
const currentDate = ref('');
const currentHm = ref('');
const currentDayOfWeek = ref('');
const currentHalfDay = ref('');
function getCurrentDateTime() {
    const now = new Date();
    const year = now.getFullYear();
    const month = padNumber(now.getMonth() + 1);
    const day = padNumber(now.getDate());
    const hours = now.getHours();
    const minutes = padNumber(now.getMinutes());
    const seconds = padNumber(now.getSeconds());
    currentHm.value = hours+":"+minutes
    currentDate.value = `${year}-${month}-${day}`;
    const dayOfWeek = now.getDay();
    currentDayOfWeek.value = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'][dayOfWeek - 1];
    currentHalfDay.value = hours < 12 ? '上午' : '下午';
}
function padNumber(num) {
      return num < 10 ? '0' + num : num;
}
let timer = setInterval(async () => {
  getCurrentDateTime()
}, 1000)

const isFullScreen = ref(false);
const toggleFullScreen = function (){
  if (!document.fullscreenElement && !isFullScreen.value) {
    // 进入全屏
    document.documentElement.requestFullscreen().then(() => {
      isFullScreen.value = true;
    });
  } else {
    // 退出全屏
    if (document.exitFullscreen) {
      document.exitFullscreen().then(() => {
        isFullScreen.value = false;
      });
    }
  }
}

const closeWindow = function (){
  if (document.exitFullscreen) {
		document.exitFullscreen();
	} else if (document.msExitFullscreen) {
		document.msExitFullscreen();
	} else if (document.mozCancelFullScreen) {
		document.mozCancelFullScreen();
	} else if (document.webkitExitFullscreen) {
		document.webkitExitFullscreen();
	}

  var userAgent = navigator.userAgent;
  if (userAgent.indexOf("Firefox") != -1 || userAgent.indexOf("Chrome") != -1) {
      location.href = "about:blank";
  } else {
      window.opener = null;
      window.open('', '_self');
  }
  window.close();
}


const compname = ref('')
/**
 * 获取服务区名称
 */
 async function getCompName() {
  const res = await ajaxRequest('post', 'getCompInfoZhkbfwq', {})
  if (res.data && res.data.compinfo) {
    compname.value = res.data.compinfo.compname
  }
}

onMounted(() => {
  if(props.originName === 'headquartersServer' || props.originName ==="parking" || props.originName ==="toilet" || props.originName ==="securitySituation"){
    getCompName()
  }
})

</script>
<style scoped>
@media screen and (min-width: 1600px){
  .title_weather_time{
    right: 40vh;
  }
}

.title_right {
  position: absolute;
  right: 1vh;
  display: flex;
  top: 0;
  .title_weather_time{
    position: absolute;
    right: 28vh;
    width: 12vh;
    top: 0.8vh;
    text-align: right;
    .title_weather_date{
      text-align: right;
    }
    .title_weather_week{
      padding-top: 0.2vh;
      font-size: 1.5vh;
    }
  }

  .title_buttons{
    display: flex;
    padding-right: 2vh;
    .title_button{
      width: 24px;
      height: 24px;
      margin-left: 1vh;
      position: relative;
      top: 1vh;
      cursor: pointer;
    }
    .title_more{
      background-image: url("../../assets/img/public/headerModule/more.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }
    .title_expand{
      background-image: url("../../assets/img/public/headerModule/expand.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }
    .title_close{
      background-image: url("../../assets/img/public/headerModule/quit.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }
  }

}
.title_logo{
  background: url("../../assets/img/public/logo.png") no-repeat;
  background-size: 90% 90%;
  position: absolute;
  left: 9vh;
  width: 245px;
  top: 0.6vh;
  height: 31px;
}
.title_center {
  position: absolute;
  width: 100%;
  text-align: center;
  font-size: 2.6vh;
  padding-top: 1.2vh;
  font-family: STHeiti,serif;
  color: #00FFFF;
  letter-spacing: 0.8vh;
  text-shadow: 1px 1px 6px #00EAFF;
}

.title_background {
  width: 100%;
  height: 9vh;
  position: absolute;
  top: 0;
  background-size: 100% 14vh;
  background: url("../../assets/img/public/headerModule/top_bg.png") no-repeat;

}

.yzbg{
  background: url("../../assets/img/header-bg/yz.png") no-repeat;
  width: 100%;
  height: 9vh;
  position: absolute;
  top: 0;
  background-size: 100% 9vh;
}

.fwqzhtcxt{
  width: 100%;
  height: 9vh;
  position: absolute;
  top: 0;
  background: url("../../assets/img/header-bg/太阳山智慧停车.png") no-repeat;
  background-size: 100% 16vh;
}

.fwqzhcsxt{
  width: 100%;
  height: 9vh;
  position: absolute;
  top: 0;
  background: url("../../assets/img/header-bg/太阳山智慧厕所.png") no-repeat;
  background-size: 100% 16vh;
}

.fwqaqtsgz{
  width: 100%;
  height: 9vh;
  position: absolute;
  top: 0;
  background: url("../../assets/img/header-bg/服务区安全态势感知.png") no-repeat;
  background-size: 100% 16vh;
}

.headquarters-server{
  width: 100%;
  height: 9vh;
  position: absolute;
  top: 0;
  background: url("../../assets/img/header-bg/headquarters_server.png") no-repeat;
  background-size: 100% 16vh;
}

.dashboard{
  width: 100%;
  height: 9vh;
  position: absolute;
  top: 0;
  background: url("../../assets/img/header-bg/top.png") no-repeat;
  background-size: 100% 16vh;
}

</style>-
